<script setup>
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/dateUtils'
import { ElMessage } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import ChannelEdit from '@/views/article/components/ChannelEdit.vue'

const channelList = ref([])
const loading = ref(false)
const tableRef = ref(null)
const dialog = ref()

const getChannelList = () => {
  // 模拟获取频道数据
  loading.value = true
  // 在实际应用中，这里应该调用API获取数据
  setTimeout(() => {
    channelList.value = [
      {
        id: 1,
        cate_name: '科技',
        cate_alias: '最新科技资讯',
        createdAt: '2023-01-01'
      },
      {
        id: 2,
        cate_name: '娱乐',
        cate_alias: '娱乐圈最新动态',
        createdAt: '2023-01-03'
      },
      {
        id: 3,
        cate_name: '体育',
        cate_alias: '体育赛事报道',
        createdAt: '2023-01-05'
      }
    ]
    loading.value = false
  }, 1000)
}

onMounted(async () => {
  await getChannelList()
})

const deleteChannel = () => {
  // 模拟删除频道操作
  const selection = tableRef.value?.getSelectionRows() || []
  if (selection.length === 0) {
    ElMessage.warning('请至少选择一个频道进行删除')
    return
  }

  // 在这里执行删除逻辑
  channelList.value = channelList.value.filter(
    (channel) => !selection.includes(channel)
  )

  ElMessage.success('已删除选中的频道')
}

const onAddChannel = () => {
  dialog.value.open({})
}
const onEditChannel = (row) => {
  dialog.value.open(row)
}

const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确定删除频道吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  // 模拟删除操作
  channelList.value = channelList.value.filter(
    (channel) => channel.id !== row.id
  )
  ElMessage.success('删除成功！')
  getChannelList()
}

const onSuccess = () => {
  getChannelList()
}
</script>
<template>
  <page-container title="频道管理">
    <template #extra>
      <el-button type="primary" @click="onAddChannel">新增频道</el-button>
      <el-button type="danger" @click="deleteChannel">删除频道</el-button>
    </template>
    <el-table
      :data="channelList"
      style="width: 100%"
      v-loading="loading"
      ref="tableRef"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="cate_name" label="频道名称" />
      <el-table-column prop="cate_alias" label="频道描述" />
      <el-table-column prop="createdAt" label="创建时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="{ row, $index }">
          <el-button
            @click="onEditChannel(row, $index)"
            type="primary"
            :icon="Edit"
            circle
            plain
          ></el-button>
          <el-button
            @click="onDelChannel(row, $index)"
            type="danger"
            :icon="Delete"
            circle
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <ChannelEdit ref="dialog" @success="onSuccess"></ChannelEdit>
  </page-container>
</template>

<style lang="scss" scoped></style>
